<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }

        div {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <h1>待办事项</h1>
    <input type="text" class="tian">
    <button onclick="add()">添加事项</button>
    <h1>事项列表</h1>
    <div class="small"></div>

    <button onclick="xian()">查看所有事项</button>
    <button onclick="yi()">查看已完成事项</button>
    <button onclick="wei()">查看未成功事项</button>
    <button onclick="qing()">清楚所有事项</button>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //添加事项
        var arr = []
        function add() {
            var a = $(".tian").val()
            arr.push({
                id: arr.length + 1,
                pid: arr.length,
                name: a,
                is: false,
            })
            apply()
        }
    </script>
    <script>
        //渲染
        function apply() {
            $(".small").html("")
            arr.forEach(item => {
                $(".small").append(`
                     <li><input type="checkbox" ${item.is ? "checked" : ""} onclick="input_all(${item.id})">${item.name}<button onclick="dele(${item.id})">删除</button></li>
                    `)
            })
        }
    </script>
    <script>
        //删除
        function dele(id) {
            var index = arr.findIndex(item => item.id == id)
            arr.splice(index, 1)
            apply()
        }
    </script>
    <script>
        //完成事项
        function input_all(id) {
            var iid = arr.find(item => item.id == id)
            iid.is = event.target.checked
        }
    </script>
    <script>
        //已完成
        function yi() {
            $(".small").html("")
            var index = arr.filter(item => item.is == true)
            index.forEach(item => {
                $(".small").append(`
                     <li><input type="checkbox" ${item.is ? "checked" : ""} onclick="input_all(${item.id})">${item.name}<button onclick="dele(${item.id})">删除</button></li>
                    `)
            })
        }
    </script>
    <script>
        //未完成
        function wei() {
            $(".small").html("")
            var index = arr.filter(item => item.is == false)
            index.forEach(item => {
                $(".small").append(`
                     <li><input type="checkbox" ${item.is ? "checked" : ""} onclick="input_all(${item.id})">${item.name}<button onclick="dele(${item.id})">删除</button></li>
                    `)
            })
        }
    </script>
    <script>
        //显示所有事项
        function xian() {
            $(".small").html("")
            arr.forEach(item => {
                $(".small").append(`
                     <li><input type="checkbox" ${item.is ? "checked" : ""} onclick="input_all(${item.id})">${item.name}<button onclick="dele(${item.id})">删除</button></li>
                    `)
            })
        }
    </script>
    <script>
        //清除
        function qing() {
            $(".small").html("")
        }
    </script>
</body>

</html>